<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>SOLR 监控</title>
    <script type="text/javascript" src="./js/echarts-5.3.0.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
<div id="title" style="width:1200px;height:100px"></div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="line" style="width: 1200px;height:800px;"></div>
<div id="pie" style="width: 1200px;height:800px;"></div>
<div id="bak" style="width:200px;height:100px"></div>
<div id="bar" style="width: 1200px;height:800px;"></div>

<script type="text/javascript">
    var title = echarts.init(document.getElementById('title'));
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    var pieChart = echarts.init(document.getElementById('pie'));
    var lineChart = echarts.init(document.getElementById('line'));


    var titleOption = {
        graphic: {
            elements: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '手机性能统计图',
                        fontSize: 50,
                        fontWeight: 'bold',
                        lineDash: [0, 200],
                        lineDashOffset: 0,
                        fill: 'transparent',
                        stroke: '#000',
                        lineWidth: 1
                    },
                    keyframeAnimation: {
                        duration: 3000,
                        loop: true,
                        keyframes: [
                            {
                                percent: 0.7,
                                style: {
                                    fill: 'transparent',
                                    lineDashOffset: 200,
                                    lineDash: [200, 0]
                                }
                            },
                            {
                                // Stop for a while.
                                percent: 0.8,
                                style: {
                                    fill: 'transparent'
                                }
                            },
                            {
                                percent: 1,
                                style: {
                                    fill: 'gray'
                                }
                            }
                        ]
                    }
                }
            ]
        }
    };

    $.ajax({
        type: "post",
        async: true,
        url: "/getData",
        dataType: "json",
        success: function (data) {
            if (data) {
                // 指定图表的配置项和数据
                var barOption = {
                    title: {
                        text: '手机性能柱状统计图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['手机性能柱状统计图']
                    },
                    xAxis: {
                        data: data[0].key,
                    },
                    yAxis: {},
                    color: '#fac858',
                    series: [
                        {
                            name: '评测分数',
                            type: 'bar',
                            data: data[0].value,
                        }
                    ]
                };


                // 指定图表的配置项和数据
                var lineOption = {
                    title: {
                        text: '折线柱状统计图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['品牌销量', '品牌评测分数']
                    },
                    xAxis: {
                        data: data[0].key,
                    },
                    yAxis: {type: "log",},
                    series: [
                        {
                            name: '品牌销量',
                            type: 'line',
                            data: data[1].value
                        }, {
                            name: '品牌评测分数',
                            type: 'line',
                            data: data[0].value
                        }
                    ]
                };

                var pieOption = {
                    title: {
                        text: '品牌销量占比饼状图'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '85%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '品牌销量占比饼状图',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data[2]
                        }
                    ]
                };
                title.setOption(titleOption);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(barOption);
                lineChart.setOption(lineOption);
                pieChart.setOption(pieOption);
            }
        },
        error: function (errorMsg) {
            alert("图表请求数据失败！");
            myChart.hideLoading();
            totalChart.hideLoading();
            lineChart.hideLoading();
            pieChart.hideLoading();
        }
    });
</script>
</body>
</html>
